<!doctype html>
<html itemscope="" itemtype="http://schema.org/SearchResultsPage" lang="en">

<head>
  <meta content="origin" name="referrer">
  <title>world cup 2018</title>
  <script src="../build/g6.js"></script>
  <script src="../build/plugin.template.maxSpanningForest.js"></script>
  <script src="../build/plugin.layout.forceAtlas2.js"></script>
  <script src="../build/plugin.behaviour.analysis.js"></script>
  <script src="../build/plugin.tool.mapper.js"></script>
  <script src="../build/plugin.tool.fisheye.js"></script>
  <script src="../build/plugin.util.extractSubgraph.js"></script>
  <script src="../build/plugin.tool.highlightSubgraph.js"></script>
  <script src="../build/plugin.edge.quadraticCurve.js"></script>
  <script src="./assets/jquery-3.2.1.min.js"></script>

</head>

<body>
  <div id='mountNode' style='background-color:rgb(57,64,77);position:absolute; width:736px; height:800px'>
    <h3 style='color:white; margin: 20pt 20pt 0pt; position: relative;'>2018 世界杯关注度、胜负分析</h3>
    <p style='color:rgb(126,131,139); margin:20px 100px 0px 22px'>该图为 2018 年世界杯期间的相关数据。图上点越大代表该国球队关注的人数越多，连线代表双方有对战，箭头代表胜方，双箭头代表双方均有赢。</p>
  </div>
  <script>

  
    var graph = null;
    $.getJSON('./assets/data/world-cup2018.json', data => {
      const nodes = data.nodes;
      const edges = data.edges;
      for(let i = 0; i < nodes.length; i += 1){
        nodes[i].degree = 0;
        nodes[i].indegree = 0;
        nodes[i].outdegree = 0;
      }
      for(let i = 0; i < edges.length; i += 1){
        for(let j = 0; j < nodes.length; j += 1){
          if(nodes[j].id == edges[i].source) {
            nodes[j].degree +=1 ;
            if(edges[i].directed)
              nodes[j].outdegree += 1;
          }else if(nodes[j].id == edges[i].target){
            nodes[j].degree += 1;
            if(edges[i].directed)
              nodes[j].indegree += 1;
          }
        }
      }

      const Mapper = G6.Plugins['tool.mapper'];
      const Plugin = G6.Plugins['layout.forceAtlas2'];
      const nodeSizeMapper = new Mapper('node', 'indegree', 'size', [30, 50], {legendCfg: null});
      const nodeColorMapper = new Mapper('node', 'indegree', 'color', ['#166dac', '#008cec'], {legendCfg: null}); 
      const FisheyePlugin = G6.Plugins['tool.fisheye'];
      graph = new G6.Graph({
        id: 'mountNode', // dom id
        fitView: 'autoZoom',
        plugins: [
          new Plugin({
            useWorker: false,
            prevOverlapping: true
          }), 
          new FisheyePlugin({
            radius: 200
          }),
          nodeSizeMapper, 
          nodeColorMapper
        ],
        minZoom: 0,
        modes: {
          default: ['panCanvas']
        },
        width: 736,
        height: 600
      });
      graph.edge({
        style(model) {
          return{
            stroke: '#A3B1BF',
            lineWidth: 2,
            endArrow: model.directed
          };
        }
      });
      graph.node({
        style(model) {
          return {
            stroke: '#2f4c66',
            lineWidth: 5,
            fillOpacity: 1,
            strokeOpacity: 1
          }
        }
      });
      graph.node({
        label(model) {
          return {
            fontFamily: 'PingFang SC',
            text: model.name,
            fill: '#fff',
            stroke: '#777',
            lineWidth: 2.5,
            fontSize: 12
          }
        }
      });
      graph.read(data);

      var parent = document.getElementById('mountNode');
      var img = document.createElement("img");
      img.src = './assets/data/footer.png';
      img.setAttribute('width', 130);
      img.style.setProperty('margin', '0pt');
      img.style.setProperty('margin-top', '400pt');
      img.style.setProperty('position', 'absolute');
      parent.appendChild(img);

      var footer = document.createElement("a");
      footer.style.setProperty('margin', '20pt');
      footer.style.setProperty('margin-top', '485pt');
      footer.style.setProperty('position', 'absolute');
      footer.style.setProperty('color', 'rgb(126,131,139)');
      footer.style.setProperty('text-decoration', 'none');
      footer.innerHTML = '|   数据来源：2018 FIFA 官网';
      footer.href = 'https://www.fifa.com/worldcup/';
      parent.appendChild(footer);
    });


  </script>

</body>
